import React,{useState} from 'react';
import { connect } from '@umijs/max';
import GroupList from './components/groupList';
import LoginForm from './components/loginFrom';
import useIsDrak from '@/hooks/useIsDrak';
import LoginPng from './assets/bg2.png'
import './index.less'

import {Typography} from 'antd'
const { Title} = Typography
const Login: React.FC<{userInfo:API.SaveLoginInt}> = ({userInfo}) => {
 
    const [groupList,setGroupList] = useState<API.GoupListType[]>([])
    const isDrak = useIsDrak()



    return (
        <div className={`login-container ${isDrak?'drak':''} `}>
            <div className='w-[1299px] rounded-3xl z-10 flex overflow-hidden' >
                <div className='text-white hidden lg:flex w-2/3 bg-blue-900 flex justify-center items-center flex-col' style={{backgroundImage:'linear-gradient(195.71deg, rgba(1, 130, 246, 1) 0%, rgba(0, 110, 238, 1) 100%)'}}>
                   <div className='w-[80%] px-16 animate-down text-lg py-10'>
                    <p className=''>
                        Hi! 你好！
                    </p>
                    <p>
                        <span>欢迎使用</span>
                        <span>智美sass</span>
                    </p>
                   </div>
                    <img className='w-[80%] h-[auto]' src={LoginPng} alt="" />
                </div>
                <div className='w-[90%] sm:w-[80%] md:w-[60%] mx-auto rounded-xl py-6 :lg:py-0 lg:w-1/3 lg:rounded-none right-shadow bg-[#5CB0FA] flex justify-center items-center' >
                    <div className=' flex flex-col gap-y-4'>
                    <Title level={3} className=' !text-white'>登录系统</Title>
                    {
                        groupList.length > 0 ? <GroupList data={groupList} back={()=>setGroupList([])}/>:<LoginForm onSubmit={setGroupList}/>
                    }
                    </div>
                </div>
                   
            </div>
       </div>
    );
};

export default connect(({userInfo})=>({userInfo})=>({userInfo}))(Login) ;
